<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<script src="../js/someFunction.js" type="text/javascript" charset="UTF-8"></script>

		<script type="text/javascript">
			//网页加载完成后执行
			$(function () {
				//引入公共头部、中间导航条以及页脚
				$(".header").load("components/head.html")
				$(".footer").load("components/footer.html")
				$(".middleNavigation").load("components/middleNavigationBar.html")

				//通过选择器找到修改的提交按钮
				$("#btn-change-password").click(function () {
					if ($("#oldPwd").val() == "" || $("#password").val() == "" || $("#rePwd").val() == ""){
						$("#error-msg").text("请填写完信息后再提交！");
						return false;
					}
					//验证密码是否符合规则
					let passCheck = /^\w{5,12}$/;
					let password = $("#password").val();
					if (!passCheck.test(password)){
						$("#error-msg").text("新密码必须是5-12位的字母和数字");
						return false;
					}else {
						$("#error-msg").empty()
					}

					//验证确认密码和密码是否相同
					let rePass = $("#rePwd").val();
					if (rePass !== password){
						$("#error-msg").text("密码不一致");
						return false;
					}else {
						$("#error-msg").empty()
					}
					//绑定单击事件
					$.ajax({
						url: "/user/resetPassword",
						type: "post",
						data: $("#form-change-password").serialize(),
						dataType: "json",
						success: function (res) {
							if (res.status === 200){
								alert("密码已更改成功，请重新登录")
								//跳转至首页，让用户重新登录
								location.href = "login.html"
							}else {
								$("#error-msg").html(res.message)
							}
						},
						error: function (error) {
							alert(error.status + "错误,服务器出现故障，请等待攻城狮修复！！")
						}
					})
				})
			})
		</script>
	</head>

	<body>

		<!--头部开始-->
		<div class="header"></div>
		<!--头部结束-->

		<!--中间导航条开始 -->
		<div class="middleNavigation"></div>
		<!--中间导航条结束-->

		<div class="container">
			<div class="col-md-2">
				<!--左侧导航开始-->
				<div class="panel-group" id="accordion">
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：我的订单-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">我的订单</a>
							</p>
						</div>
						<div id="collapseOne" class="panel-collapse collapse">
							<div class="panel-body">
								<div><a href="orders.html">全部订单</a></div>
								<div><a href="orders.html">待付款</a></div>
								<div><a href="orders.html">待收货</a></div>
								<div><a href="orders.html">待评价</a></div>
								<div><a href="orders.html">退货退款</a></div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：资料修改-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
							</p>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse in">
							<div class="panel-body">
								<div><a href="password.html"><b>修改密码</b></a></div>
								<div><a href="userdata.html">个人资料</a></div>
								<div><a href="upload.html">上传头像</a></div>
								<div><a href="address.html">收货管理</a></div>
							</div>
						</div>
					</div>
				</div>
				<!--左侧导航结束-->
			</div>
			<div class="col-md-10">
				<div class="panel panel-default">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#">修改密码</a></li>
						<li><a href="userdata.html">个人资料</a></li>
						<li><a href="upload.html">上传头像</a></li>
						<li><a href="address.html">收货管理</a></li>
					</ul>
					<div class="panel-body">
						<!--修改密码表单开始-->
						<form id="form-change-password" class="form-horizontal" role="form">
							<div class="form-group">
								<label class="col-md-2 control-label">原密码：</label>
								<div class="col-md-4">
									<input id="oldPwd" name="oldPassword" type="text" class="form-control" placeholder="请输入原密码">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">新密码：</label>
								<div class="col-md-4">
									<input id="password" name="newPassword" type="password" class="form-control" placeholder="请输入新密码">
								</div>
								<img id="img" onclick="showPasswordOrNot('password','img')" src="../images/img/open.jpeg" style="width: 20px;padding-top: 5px;">
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">确认密码：</label>
								<div class="col-md-4">
									<input id="rePwd" type="password" class="form-control" placeholder="请再次输入新密码">
								</div>
								<img id="rePwdImg" onclick="showPasswordOrNot('rePwd','rePwdImg')" src="../images/img/open.jpeg" style="width: 20px;padding-top: 5px;">
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-1">
									<input id="btn-change-password" type="button" class="btn btn-primary" value="修改" />
								</div>
								<div id="error-msg" class="col-sm-8" style="color: red;font-weight:bold;padding-top: 5px" ></div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="clearfix"></div>
		<!--页脚开始-->
		<div class="footer"></div>
		<!--页脚结束-->

	</body>

</html>